<template>
  <div id="addPictureBatchPage">
    <h2 style="margin-bottom: 16px; text-align: center" v-if="route.path !== '/add_picture'">
      批量创建图片
    </h2>
    <!-- 图片信息表单 -->
    <a-form
      layout="vertical"
      :model="formData"
      @finish="handleSubmit(formData.searchText, formData.category, formData.tags)"
    >
      <a-form-item label="抓取关键词" name="searchText">
        <a-input v-model:value="formData.searchText" placeholder="请输入关键词" allow-clear />
      </a-form-item>
      <a-form-item label="抓取数量" name="count">
        <a-input-number
          v-model:value="formData.count"
          placeholder="默认抓取10条，最多30条"
          style="min-width: 210px"
          :min="1"
          :max="30"
        />
      </a-form-item>
      <a-form-item label="名称前缀" name="namePrefix">
        <a-input
          v-model:value="formData.namePrefix"
          placeholder="请输入图片名称前缀，会自动补充序号"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="图片分类" name="category">
        <a-auto-complete
          v-model:value="formData.category"
          placeholder="可自定义输入这些图片的分类"
          :options="categoryOptions"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="图片标签" name="tags">
        <a-select
          v-model:value="formData.tags"
          mode="tags"
          placeholder="可自定义输入这些图片的标签"
          :options="tagOptions"
          allow-clear
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" block :loading="loading">
          {{ loading ? `正在抓取图片...` : `执行任务` }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import {
  listPictureTagCategoryUsingGet,
  uploadPictureByBatchUsingPost,
} from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'

// 批量抓取图片信息表单，类型是批量抓取图片请求体，默认是空对象
const formData = reactive<API.PictureUploadByBatchRequest>({})
const loading = ref(false)
const router = useRouter()
const route = useRoute()

/**
 * 提交表单上传图片
 * @param namePrefix
 */
const handleSubmit = async (namePrefix: string, category: string, tags: string[]) => {
  loading.value = true
  const res = await uploadPictureByBatchUsingPost({
    ...formData,
  })
  if (res.data.code === 0 && res.data.data) {
    message.success(`成功创建 ${res.data.data} 条数据`)
    // 跳转到主页
    router.push({
      path: '/',
      query: {
        namePrefix,
        category,
        tags,
      },
    })
  } else {
    message.error('创建失败，' + res.data.message)
  }
  loading.value = false
}

const categoryOptions = ref<String[]>([])
const tagOptions = ref<String[]>()

/**
 * 进入创建图片页面 展示默认标签和分类选项
 */
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data) {
    // @ts-ignore
    tagOptions.value = (res.data.data.tagList ?? []).map((data: String) => {
      return {
        value: data,
        label: data,
      }
    })
    // @ts-ignore
    categoryOptions.value = (res.data.data.categoryList ?? []).map((data: String) => {
      return {
        value: data,
        label: data,
      }
    })
  } else {
    message.error('默认分类标签列表展示失败，' + res.data.message)
  }
}

onMounted(() => {
  getTagCategoryOptions()
})
</script>

<style scoped>
#addPictureBatchPage {
  max-width: 550px;
  margin: 0 auto;
}
</style>
